import React, { useState } from "react"; // 导入 React 和 useState Hook
import Tesseract from "tesseract.js"; // 导入 Tesseract.js 用于 OCR 文字识别
import { sleep } from "antd-mobile/es/utils/sleep"; // 导入 sleep 函数，用于模拟上传延迟
import { ImageUploader } from "antd-mobile"; // 导入 Ant Design Mobile 的图片上传组件
import { ImageUploadItem } from "antd-mobile/es/components/image-uploader"; // 导入图片上传项类型

// App 组件
function Home() {
  // 用于存储用户选择的文件列表
  const [files, setFiles] = useState<File[]>([]);
  // 用于存储图片上传后的文件信息（ImageUploadItem 类型）
  const [fileList, setFileList] = useState<ImageUploadItem[]>([]);
  // 用于存储 OCR 识别结果
  const [ocrResult, setOcrResult] = useState<string>("");

  // 模拟文件上传的函数
  async function mockUpload(file: File) {
    setFiles([file]); // 更新文件列表，存储用户选择的文件
    await sleep(3000); // 模拟上传延迟 3 秒
    return {
      url: URL.createObjectURL(file), // 创建一个临时的文件 URL，供显示使用
    };
  }

  // OCR 识别过程函数
  const handleOcrProcess = () => {
    if (files[0]) { // 确保用户已经选择了文件
      // 调用 Tesseract.js 进行 OCR 识别，使用简体中文语言包
      Tesseract.recognize(files[0], "chi_sim", {
        logger: (m) => console.log(m), // 记录 OCR 过程中的日志
      }).then((res) => {
        setOcrResult(res.data.text); // 识别完成后，更新识别结果
      });
    }
  };

  return (
    <div className="App">
      {/* 图片上传组件 */}
      <ImageUploader
        value={fileList} // 传入当前文件列表
        onChange={setFileList} // 设置文件选择变化时的回调函数
        upload={mockUpload} // 设置上传函数为 mockUpload，模拟上传
        maxCount={1} // 限制最大上传数量为 1
      />
      
      <div>
        {/* OCR 识别按钮 */}
        <button onClick={handleOcrProcess}>开始识别</button>
        <br />
        
        {/* 显示 OCR 识别结果 */}
        <h3>识别文字：</h3>
        <p>{ocrResult}</p>
      </div>
    </div>
  );
}

export default Home;